<template>
  <div>
<!--    轮播图-->
    <el-carousel
        height="600px"
        indicator-position="outside">
      <el-carousel-item v-for="item in carousel" :key="item">
        <img style="width: 100%;" :src="item"/>
      </el-carousel-item>
    </el-carousel>

    <div class="body1">
      <div class="content1">
        <span class="el-menu-text1">重要通知</span>
        <ul class="infinite-list ul-content1 outContainer" v-infinite-scroll="load" style="overflow:auto;height: 91px">
          <li style="margin-top: 7px" v-for="article in articleList1" class="infinite-list-item"  @click="toArticle(article.id)">
            <span style="float: left;text-indent: 24px">{{ article.name}}</span>
            <span style="float: right">{{article.createTime|DateFormat}}</span>
          </li>
        </ul>
      </div>

      <div class="content2">
        <span class="el-menu-text1">社团要闻</span>
        <ul class="infinite-list ul-content1 outContainer" v-infinite-scroll="load" style="overflow:auto;height: 91px;">
          <li style="margin-top: 7px" v-for="article in articleList2" class="infinite-list-item" @click="toArticle(article.id)">
            <span style="float: left;text-indent: 24px">{{ article.name}}</span>
            <span style="float: right">{{article.createTime|DateFormat}}</span>
          </li>
        </ul>
      </div>
    </div>


<!-- 美丽校园-->
      <div class="content3">
        <span class="el-menu-text1">美丽校园</span>
        <div class="image_content" v-for="(item) in srcList">
          <el-image
              style="width: 100%;"
              :src="item"
              :preview-src-list="srcList">
          </el-image>
        </div>

      </div>

  </div>
</template>

<script>
import {articleListApi, imageListApi} from '@/api'
export default {
  name: "IndexA",
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      count: 0,
      srcList: [

      ],
      articleList1:[],
      articleList2:[],
      preUrl:'https://dayu-club.oss-cn-shenzhen.aliyuncs.com/',
      carousel:[],
    };
  },

  created() {
    let article1 = {
      type: '重要通知',
      status:2
    }
    let article2 = {
      type: '社团要闻',
      status:2
    }
    articleListApi(article1).then((result)=>{
      this.articleList1 = result.data.list;
    })
    articleListApi(article2).then((result)=>{
      this.articleList2 = result.data.list;
    });

    imageListApi().then((result)=>{
      result.data.list.forEach((item)=>{
        this.srcList.push(this.preUrl+item.image);
      })
    });

    imageListApi({status:1}).then((result)=>{
      result.data.list.forEach((item)=>{
        this.carousel.push(this.preUrl+item.image);
      })
    })

  },

  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },

    load(){
      this.count+=1;
    },

    toArticle(id){
      this.$router.push({
        path: '/articleA/articleB',
        query:{
          id: id,
        }
      });
    }
  }
}
</script>

<style scoped>

.el-carousel__item h3 {
  color: #99a9bf;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.body1{
  width: 100%;
  height: 150px;
}
.content1{
  width: 40%;
  height: 150px;
  float: left;

}
.content1 >span{
  display: block;
  width: 100%;
  height: 24px;
  background-color: #B22222;
  border-radius: 100px;
  line-height: 24px;
  text-indent: 24px;
}

/*滚动条宽*/
.outContainer::-webkit-scrollbar{
  width: 10px;
}
/*滚动条里面滑块*/
.outContainer::-webkit-scrollbar-thumb{
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.2);
  background: rgba(0,0,0,.2);
}
/*滚动条里面轨道*/
.outContainer::-webkit-scrollbar-track{
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.2);
  background: rgba(0,0,0,.1);
}

.content2{
  width: 40%;
  height: 150px;
  float: right;
}
.content2 >span{
  display: block;
  width: 100%;
  height: 24px;
  background-color: #B22222;
  border-radius: 100px;
  line-height: 24px;
  text-indent: 24px;
}


.content3{
  width: 100%;
  height: 200px;
  border-left: 1px solid transparent;
}
.content3 span{
  display: block;
  width: 100%;
  height: 24px;
  background-color: #B22222;
  border-radius: 100px;
  line-height: 24px;
  text-indent: 24px;
}


.el-menu-text1{
  color: white;
  margin-right: 70%;
}

.ul-content1{
  list-style-type: none;
  margin:0;
  padding: 0;
}
.ul-content1 li{
  display: inline-block;
  width: 100%;
}


.content3 .image_content{
  width: 150px;
  height: 150px;
  margin-left: 10px;
  margin-top: 10px;
  float: left;
  background-color: aliceblue;
}
</style>
